/**
 * 负责展示数据的UI组件
 */
import React, { Component } from "react";

export default class Count extends Component {
    increment = () => {
        const number = parseInt(this.selectNumber.value);

        this.props.increment(number);
    };

    decrement = () => {
        const number = parseInt(this.selectNumber.value);

        this.props.decrement(number);
    };

    incrementIfOdd = () => {
        const { count } = this.props;
        if (count % 2 === 1) {
            const number = parseInt(this.selectNumber.value);

            this.props.increment(number);
        }
    };

    incrementAsync = () => {
        const number = parseInt(this.selectNumber.value);
        this.props.incrementAsync(number, 500);
    };

    render() {
        return (
            <div>
                <h2>当前求和为：{this.props.count}</h2>
                <select ref={(c) => (this.selectNumber = c)}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                &nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>
                    当前求和为奇数时相加
                </button>
                &nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        );
    }
}
